<template>
    <div class="list-wrapper">
        <hr class="hr-solid-content" data-content="自定义列表序号">
        <div>list-style-type: '☀️'; chrome79+</div>
        <ol class="ol-1">
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
        </ol>

        <div>使用@counter-style规则自定义的项目符号列表，chrome91+ <a href="https://www.zhangxinxu.com/wordpress/2022/11/about-css-list-style-type-item/" target="_blank">参考</a></div>

        <ol class="ol-2">
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
        </ol>

        <div>::marker伪元素定义符号</div>
        <ol class="ol-3">
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
        </ol>

        <hr class="hr-solid-content" data-content="列表属性">
        <div>type属性定义序号类型：<mark>1</mark> <mark>a</mark> <mark>A</mark> <mark>I</mark> <mark>i</mark></div>
        <ol type="i">
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
        </ol>

        <div>ol有序列表start属性定义起始值</div>
        <ol start="2">
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
        </ol>

        <div>li的value属性可以指定序号值</div>
        <ol start="2">
            <li>列表项</li>
            <li value="5">列表项</li>
            <li>列表项</li>
            <li>列表项</li>
            <li value="9">列表项</li>
            <li>列表项</li>
            <li>列表项</li>
        </ol>

        <div>ol属性reversed反向展示项目</div>
        <ol reversed>
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
        </ol>

        <hr class="hr-solid-content" data-content="计数器实现自定义列表">

        <div>隐藏项目序号，使用::before为元素定义项目内容</div>
        <ol class="couter-list" startIndex="4" start="4" style="--startIndex: 20;">
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
        </ol>

        <div>使用::marker伪元素定义项目内容</div>
        <ol class="couter-marker-list" style="--startIndex: 20;">
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
        </ol>
    </div>
</template>

<style scoped>
.list-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 10px;
    gap: 8px;
    overflow: auto;
}

.ol-1 {
    list-style-type: '☀️';
}

@counter-style circled-alpha {
  system: fixed;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  suffix: " ";
}

.ol-2 {
    list-style: circled-alpha;
}

.ol-3 li::marker {
    content: '▶';
    color: red;
}

.couter-list {
    counter-reset: custom-counter var(--startIndex);
    list-style-type: none;
    padding: 0;
}

.couter-list li::before {
    counter-increment: custom-counter;
    content: counter(custom-counter, lower-alpha) ') ';
    text-align: right;
    display: inline-block;
    min-width: 2em;
    color:  rgb(43, 139, 212);
    white-space: pre;
}

.couter-marker-list {
    counter-reset: marker-counter var(--startIndex);
}

.couter-marker-list li {
    counter-increment: marker-counter;
}

.couter-marker-list li::marker {
    content: counter(marker-counter, lower-alpha) ') ';
    color:  rgb(43, 139, 212);
}
</style>